<!--基本信息页面-->
<template>
  <div class="page1">
    <div class="top">
      <h1>填写基本信息</h1>
      <p class="sub_title">向大家介绍以下自己吧</p>
      <van-field name="uploader">
        <template #input>
          <van-uploader class="uploader" v-model="profile" :max-count="1"/>
        </template>
      </van-field>
      <p class="text">上传真实头像能提高求职成功率哟～</p>
    </div>
    <form-content :profile="profile"></form-content>
  </div>
</template>

<script>
import FormContent from "../../components/page1/form-content";

export default {
  name: 'page1',
  components: {FormContent},
  data () {
    return {
      profile: []
    }
  },
  mounted () {
    this.$store.dispatch('active', 0)
  }
}
</script>

<style lang="scss" scoped>
.uploader {
  ::v-deep img {
    border-radius: 50%;
  }

  ::v-deep input {
    border-radius: 50%;
  }

  position: relative;
  margin-left: calc(50% - 40px);
}

.page1 {
  padding: 20px 10px;
  transition: .4s linear;

  .top {
    display: flex;
    align-items: center;
    flex-direction: column;

    h1 {
      font-size: 24px;
      color: #3e3e3e;
      margin-top: 30px;
    }

    .sub_title {
      font-size: 14px;
      color: #a0a5b0;
      margin: 12px 0;
    }

    .text {
      font-size: 14px;
      width: 40%;
      height: auto;
      text-align: center;
      color: #a4a9b3;
      margin-top: 10px;
      line-height: 18px;
    }
  }
}
</style>
